<template>
  <div class="viewDetail-big">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      class="flexbetween mb-15"
    >
      <el-form-item prop="name" class="mb-0 mr-0">
        <el-input
          placeholder="搜索群名称"
          v-model="queryParams.keyword"
          @keyup.enter.native="handleQuery"
          class="x-input-select"
          style="width: 180px"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="handleQuery"
          ></el-button>
        </el-input>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="tableList">
      <el-table-column
        label="群名称"
        prop="userName"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <div class="flex kh_box aligncenter">
            <img
              src="//qyb-1253970052.cos.ap-shanghai.myqcloud.com/public/wechatdata/avatar/5424982/e9564f7860994fe258a93da3a18c1a2c.png"
              alt=""
              class="useravatar"
            />
            <div class="khnamebox flex aligncenter pl-12">
              <div class="title c_222333">{{ scope.row.title }} （2）</div>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        label="触发对象"
        prop="userName"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span> <span class="dot"></span>{{ scope.row.status }} 拉人中</span>
          <!-- <span> <span class="dot dot2"></span>{{ scope.row.status }} 递补中</span> -->
          <!-- <span> <span class="dot dot3"></span>{{ scope.row.status }} 拉人中</span> -->
        </template>
      </el-table-column>
      <el-table-column
        label="建群时间"
        prop="userName"
        width="150"
      >
        <template slot-scope="scope">
          <span>{{scope.row.number}}2024-12-12</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      class="mt-0"
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      queryParams: {},
      loading: false,
      total: 0,
      tableList: [{ id: 1, title: "群聊1" }],
      multipleSelection: [],
      multiple: true,
      showplan: false,
      rowitem: null,
    };
  },
  components: {},
  methods: {
    getList() {},

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.multipleSelection = selection.map((item) => item.id);
      //   this.single = selection.length != 1;
      this.multiple = !selection.length;
    },

    handerDelete() {
      this.$message.success('删除成功')
    },
  },
};
</script>
<style lang="scss" scoped>
.viewDetail-big {
  height: calc(100vh - 200px);
  overflow-y: auto;
  padding: 20px;
}
.kh_box {
  max-width: 360px;
}
.khnamebox {
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dot {
  width: 8px;
  height: 8px;
  background: #2f54eb;
}
.dot2{
  background: #13c2c2
}
.dot3{
  background: #13c2c2
}
</style>